<template>
    <div class="welcome-page">
        <!-- 修改欢迎语 -->
        <h1 class="welcome-title">
            欢迎使用{{Vname}}<br>
            <span class="welcome-subtitle">一站式高效管理解决方案，助力企业蓬勃发展！</span>
        </h1>
        
        <!-- 新增功能卡片区域 -->
        <el-row :gutter="20" class="feature-cards">
            <el-col :span="6" v-for="(feature, index) in features" :key="index">
                <el-card shadow="hover" class="feature-card">
                    <div class="card-content">
                        <el-icon :color="feature.color" class="feature-icon">
                            <component :is="feature.icon" />
                        </el-icon>
                        <h3 class="feature-title">{{ feature.title }}</h3>
                        <p class="feature-desc">{{ feature.description }}</p>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
const Vname = import.meta.env.VITE_NAME

// 新增功能数据
const features = [
    {
        icon: 'BellFilled',
        color: '#409EFF',
        title: '实时监控',
        description: '系统提供实时数据监控看板，关键指标即时掌握'
    },
    {
        icon: 'Lock',
        color: '#67C23A',
        title: '安全可靠',
        description: '多重权限验证机制，保障企业数据安全'
    },
    {
        icon: 'TrendCharts',
        color: '#E6A23C',
        title: '智能分析',
        description: '内置数据分析模型，业务趋势一目了然'
    },
    {
        icon: 'SetUp',
        color: '#F56C6C',
        title: '灵活配置',
        description: '模块化功能设计，支持个性化需求定制'
    }
]
</script>

<style scoped>
/* 保持原有基础样式 */
.welcome-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f9;
    padding: 40px 20px; /* 新增内边距 */
}

/* 优化欢迎语样式 */
.welcome-title {
    font-size: 48px;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.welcome-subtitle {
    display: block;
    font-size: 24px;
    font-weight: normal;
    color: #666;
    margin-top: 10px;
}

/* 新增卡片样式 */
.feature-cards {
    max-width: 1200px;
    margin: 40px auto;
}

.feature-card {
    margin-bottom: 20px;
    transition: transform 0.3s;
    
    &:hover {
        transform: translateY(-5px);
    }
}

.card-content {
    text-align: center;
    padding: 20px;
}

.feature-icon {
    font-size: 40px;
    margin-bottom: 15px;
}

.feature-title {
    color: #303133;
    margin: 10px 0;
    font-size: 18px;
}

.feature-desc {
    color: #606266;
    font-size: 14px;
    line-height: 1.6;
}
</style>